<script setup>

import axios from 'axios'
import { onMounted, reactive, ref } from 'vue'


let loading = ref(false)
let data = reactive({
  tableData: []
})

const init = async() => {
  //请求加载loading
  loading.value = true

  // 1.请求回来的10万条数据先不要着急渲染
  // 2.假如10条分为一堆，那么能分为10000堆
  // 3.最后利用定时器定时20s一堆拼接一堆的渲染
  const res = await axios.get('/api/getList')
  loading.value = false
  // 分堆函数(二次加工过的二维分堆数组)
  let twoArr = stackFn(res.data.data)
  // 定时器渲染
  for(let i = 0; i < twoArr.length; i++) {
    setTimeout(() => {
      data.tableData = [...data.tableData, ...twoArr[i]]
    }, 20*i)
  }
}

const stackFn = (data) => {
  let i = 0, result = []
  while(i < data.length){
    result.push(data.slice(i, i + 10))
    i = i + 10
  }
  return result
}

const animationInit = async () => {
  loading.value = true
  const res = await axios.get('/api/getList')
  loading.value = false
  // 1.拿到数据以后进行分堆操作，10个为一堆,一共有10000堆
  // 2.因为定时器渲染出来的滑动快的时候会有掉帧现象，为了处理这个问题，可以用请求动画帧requestAnimationFrame浏览器接口来在下一次浏览器重绘之前执行
  
  // 拿到分堆数据
  let twoData = animationStack(res.data.data)
  //定义一个页面指针（类似分页的页码）,从 0 开始
  let page = 0
  // 定义一个渲染函数
  const render = (page) => {
    // 利用requestAnimationFrame 接口传入回掉函数 渲染页面
    requestAnimationFrame(() => {
      if(page > twoData.length - 1) return
      // 拼接渲染数据
      data.tableData = [...data.tableData, ...twoData[page]]
      page++
      render(page)
    })
  }
  // 首次执行渲染函数
  render(page)
}

const animationStack = (data) => {
  let i = 0, result = []
  while(i < data.length){
    result.push(data.slice(i, i + 10))
    i = i + 10
  }
  return result
}
</script>

<template>
  <el-button size="small" type="primary" @click="animationInit"
    >点击请求加载</el-button
  >
  <el-table
    v-loading="loading"
    :data="data.tableData"
    height="250"
    style="width: 60%"
  >
    <el-table-column prop="id" label="序 ID" width="180" />
    <el-table-column prop="name" label="名字" width="180" />
    <el-table-column prop="value" label="对应值" />
  </el-table>
</template>
